<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="//cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/highlight.js/9.15.6/styles/monokai-sublime.min.css" rel="stylesheet">
</head>

<body>

<div class="jumbotron">
    <div class="container">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
            featured content or information.</p>
    </div>
</div>

<div class="container mb-5">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">我的作业</a></li>
            <li class="breadcrumb-item active" aria-current="page">当前作业标题</li>
        </ol>
    </nav>
</div>


<div class="container mb-5">
    <h2 class="h4">留作业：响应式网页练习</h2>
    <ul class="list-unstyled">
        <li>布置时间：2019-03-27 09:00:00</li>
        <li>完成时间：2019-03-28 09:00:00</li>
        <li>完成期限：1天</li>
        <li>所占学分：10（规定时间内完成+10分，规定时间外完成+5分，前10名完成额外+5分-待修改）</li>
    </ul>
    <div class="shadow-none p-3 mb-5 bg-light rounded">这里是具体描述这个作业的内容。</div>
</div>

<div class="container mb-5" hidden>
    <div hidden class="alert alert-success" role="alert">
        很棒，作业合格，继续加油。
    </div>
    <div class="alert alert-danger" role="alert">
        提交的作业不合格，需修改后，再次提交作业。
    </div>
    <div hidden class="alert alert-warning" role="alert">
        提交的作业，正在审核中。
    </div>
</div>

<div class="container mb-5" hidden>
    <h2 class="h4">交作业：我提交的</h2>
    <ul class="list-unstyled">
        <li>姓名：董晓飞</li>
        <li>提交时间：2019-03-28 09:00:00</li>
        <li>状态：待审核 | 不合格 | 合格</li>
    </ul>
    <div class="shadow-none p-3 mb-5 bg-light rounded">
        <a href="">http://www.qq.com/</a>
    </div>
</div>



<div class="container mb-5">
    <div class="row">
        <div class="col-md"></div>
        <div class="col-md">
            <button type="button" class="btn btn-primary btn-lg btn-block" id="submit">
                我做完了，提交作业
                <!--重新提交作业-->
            </button>
        </div>
        <div class="col-md"></div>
    </div>
</div>


<div class="container mb-5">
    <div class="row text-center">
        <div class="col">待提交</div>
        <div class="col">审核中</div>
        <div class="col">已完成</div>
    </div>
    <div class="progress mb-5">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:15%;">

        </div>
    </div>
</div>



<div class="container mb-5" hidden>
    <h2 class="h4 text-center mb-3">检查作业</h2>
    <div class="row text-center">
        <div class="col"></div>
        <div class="col">
            <button type="button" class="btn btn-success btn-lg btn-block" id="jiancha"><i class="fa fa-smile-o"></i>
            </button>
        </div>
        <div class="col">
            <button type="button" class="btn btn-danger btn-lg btn-block" id="jiancha1"><i class="fa fa-frown-o"></i>
            </button>
        </div>
        <div class="col"></div>
    </div>
</div>


<div class="container mb-5" hidden>
    <h2 class="h4">改作业：批改记录</h2>

    <ul class="list-unstyled">
        <li class="media shadow-sm p-3 mb-3 bg-white rounded">
            <img width="32" height="32"
                 src="http://thirdqq.qlogo.cn/qqapp/101467767/426B4A0E5DD109F402E7BAED92A24FAD/100" class="mr-3"
                 alt="">
            <div class="media-body">
                <h5 class="h6 mt-0 mb-1">董晓飞：</h5>
                <p>通过审核</p>
                <small>2019年3月27日16:42:26</small>
            </div>
        </li>
        <li class="media shadow-sm p-3 mb-3 bg-white rounded">
            <img width="32" height="32"
                 src="http://thirdqq.qlogo.cn/qqapp/101467767/426B4A0E5DD109F402E7BAED92A24FAD/100" class="mr-3"
                 alt="...">
            <div class="media-body">
                <h5 class="h6 mt-0 mb-1">董晓飞：</h5>
                <p>通过审核</p>
                <small>2019年3月27日16:42:26</small>
            </div>
        </li>
    </ul>

</div>

<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="//cdn.bootcss.com/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="//cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="//cdn.bootcss.com/highlight.js/9.15.6/highlight.min.js"></script>
<script>
    var submit = document.querySelector("#submit");
    if (submit) {
        submit.addEventListener("click", function () {
            swal("请在此输入git地址，点击提交按钮，即可提交。", {
                content: "input",
            })
                .then((value) => {
                    swal(`You typed: ${value}`);
                });
        })
    }
    var jiancha = document.querySelector("#jiancha");
    if (jiancha) {
        jiancha.addEventListener("click", function () {
            swal("请输入检查结果：", {
                content: "input",
            })
                .then((value) => {
                    swal(`You typed: ${value}`);
                });
        })
    }
    var jiancha1 = document.querySelector("#jiancha1");
    if (jiancha1) {
        jiancha1.addEventListener("click", function () {
            swal("请输入检查结果：", {
                content: "input",
            })
                .then((value) => {
                    swal(`You typed: ${value}`);
                });
        })
    }
</script>
</body>
</html>